<template>
  <div class="my-order">
    <div class="my-order-header">
      <back-title :message="message"></back-title>
    </div>
    <div class="my-order-search">
      <van-search v-model="value" placeholder="搜索我的订单" shape="round" @click="toSearch" />
    </div>
    <div class="my-order-tab" v-if="this.myOrder.length === 0">
      <van-tabs v-model="active">
        <van-tab :title="info" v-for="(info, index) in tabList" :key="index">
          <ul>
            <li><img src="../img/Myorder.png" alt=""></li>
            <li>您暂时没有相关订单</li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <div class="my-order-tab-second" v-else>
      <van-tabs v-model="active">
        <van-tab :title="info" v-for="(info, index) in tabList" :key="index">
          <div class="order-card" v-for="(value, index) in myOrder" :key="index">
            <div class="order-box">
              <div class="order-box-header">
                <div class="order-box-header-state">{{value.order_status}}</div>
                <div class="order-box-remove">
                  <img src="../img/delete.png" @click="remove(value.order_nu)">
                </div>
              </div>
              <div class="order-box-item">
                <div class="order-content">
                  <div class="order-cover">
                    <img :src="'http://127.0.0.1:8089/static' + getOdGdsInfo(value.order_nu)[0].goods_cover_img">
                  </div>
                  <div class="content">
                    {{getOdGdsInfo(value.order_nu)[0].goods_name + getOdGdsInfo(value.order_nu)[0].goods_intro}}
                  </div>
                  <div class="order-num">x{{getOdItem(value.order_nu)[0].goods_count}}</div>
                </div>
              </div>
              <div class="order-total-bar">
                <div class="order-payment">
                  实付
                  <span class="price">￥{{value.total_price}}</span>
                </div>
              </div>
              <van-divider :style="{ borderColor: '#e5e5e5', padding: '0 5px', margin: '4px 0'}">
              </van-divider>
              <div class="order-button">
                <div class="od-btn-white od-btn" v-if="value.order_status === '已完成'">追加评价</div>
                <div class="od-btn-white od-btn" v-if="value.order_status === '未完成'">看相似</div>
                <div class="od-btn-red od-btn" v-if="value.pay_status === '未支付'">去支付</div>
                <div class="od-btn-red od-btn" v-if="value.order_status === '已完成' || value.pay_status === '已支付'"
                  @click="buyAgain(value.order_nu)">再次购买</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="my-order-items"></div>
  </div>
</template>

<script>
  import BackTitle from '../../../components/BackHeader/BackTitle.vue'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import axios from 'axios'
  export default {
    components: {
      BackTitle
    },
    data() {
      return {
        message: '我的订单',
        value: '',
        active: 2,
        tabList: ['全部', '待付款', '待收货', '已完成', '回收站']
      }
    },
    methods: {
      ...mapMutations(['SET_ORDER_ITEM', 'SET_GOODS_ITEM']),
      toSearch() {
        this.$router.push({
          name: 'OrderSearch'
        })
      },
      getOrderItem() {
        this.$api.homeData.orderItem().then(res => {
          this.SET_ORDER_ITEM(res.data)
        })
      },
      getOdItem(info) {
        return this.orderItem.filter(value => {
          return value.order_nu === info
        })
      },
      getOdGdsInfo(orderNum) {
        const list = this.orderItem.filter(value => {
          return value.order_nu === orderNum
        })
        return this.goodsInfo.filter(value => {
          return value.goods_id === list[0].goods_id
        })
      },
      // 删除订单
      remove(pk) {
        const params = {
          is_deleted: '1'
        }
        this.$dialog.confirm({
          title: '您确定要删除该订单？',
          message: '您可在"我的订单"-"回收站"中查看'
        }).then(() => {
          axios.put(axios.defaults.baseURI + "books/mallorder/" + pk + '/', params).then(res => {
            console.log('res:', res)
            this.$toast('删除成功')
          })
        }).catch(() => {

        })
      },
      // 再次购买
      buyAgain(orderNu) {
        const byAgGdID = this.getOdGdsInfo(orderNu)
        const list = []
        const list1 = {
          count: 1,
          goodsID: byAgGdID[0].goods_id
        }
        list.push(list1)
        this.SET_GOODS_ITEM(list)
        console.log('byaggdid:', byAgGdID)
        this.$router.push({
          name: 'OrderConfirm'
        })
      }
    },
    created() {
      this.getOrderItem()
    },
    mounted() {
      const ref = this.$route.query.name
      this.active = Number(ref)
    },
    computed: {
      ...mapState(['order', 'loginToken', 'orderItem', 'goodsInfo']),
      myOrder() {
        if (this.active === 0) {
          return this.order.filter(value => {
            return value.user_id === this.loginToken.userId && value.is_deleted === 0
          })
        } else if (this.active === 1) {
          return this.order.filter(value => {
            return value.user_id === this.loginToken.userId && value.pay_status === '未支付' && value.is_deleted === 0
          })
        } else if (this.active === 2) {
          return this.order.filter(value => {
            return value.user_id === this.loginToken.userId && value.pay_status === '已支付' && value.is_deleted === 0
          })
        } else if (this.active === 3) {
          return this.order.filter(value => {
            return value.user_id === this.loginToken.userId && value.order_status === '已完成' && value.is_deleted ===
              0
          })
        } else {
          return this.order.filter(value => {
            return value.user_id === this.loginToken.userId && value.is_deleted === 1
          })
        }
      }
    }
  }
</script>

<style scoped>
  .my-order {
    width: 100%;
    min-height: 100%;
    background-color: #F2F2F2;
  }

  .my-order-tab .van-tab__pane {
    text-align: center;
    padding-top: 160px;
  }

  .order-box {
    margin: 15px 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 5%);
    background-color: white;
  }

  .my-order-tab-second .order-box-header {
    display: flex;
    justify-content: flex-end;
  }

  .my-order-tab-second .order-box-header-state {
    margin-right: 10px;
    font-size: 14px;
    color: #999999;
  }

  .my-order-tab-second .order-box-header img {
    width: 15px;
    height: 15px;
  }

  .order-box-item {
    display: block;
  }

  .order-box-item .order-content {
    margin-top: 8px;
    display: flex;
    overflow: hidden;
  }

  .order-cover {
    width: 75px;
    height: 4.6875rem;
    margin-right: 10px;
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
  }

  .order-cover img {
    width: 75px;
    height: 75px;
  }

  .content {
    color: #333333;
    align-self: center;
    flex: 1;
  }

  .order-num {
    margin-left: 8px;
    color: #999999;
    align-self: center;
  }

  .order-total-bar {
    margin-top: 5px;
    position: relative;
    display: flex;
    justify-content: flex-end;
  }

  .order-payment {
    font-size: 14px;
    color: #333333;
    line-height: 21px;
  }

  .price {
    font-size: 16px;
    color: #151515;
    /* 行内元素垂直方向的对齐 */
    /* vertical-align: bottom; */
  }

  .order-button {
    padding-top: 10px;
    font-size: 14px;
    color: #333333;
    display: flex;
    justify-content: flex-end;
  }

  .od-btn-white {
    background-color: #FFFFFF;
    color: #333333;
    border: 1px solid #ccc;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 5%);
  }

  .od-btn {
    text-align: center;
    width: 86px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .od-btn-red {
    background-color: #fff;
    color: #f2270c;
    border: 1px solid #f2270c;
    box-shadow: 0 3px 6px 0 rgb(242 39 12 / 10%);
  }
</style>
